<template>
  <div id="app">
    {{$store.getters.name}}
    {{name}}
    <button @click="updateName">改变名字</button>
    <h1>{{$store.state.a.bobby}} </h1>
    <h1>===================</h1>
    <h1>{{$store.state.info}}</h1>
    <h2><button @click="update"></button></h2>
    <div class="hehe">hehe</div>
    {{ $store.state.name }}
    <h2>{{ $store.state.counter }}</h2>

    <h3>getters {{ counters }}</h3>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
    <button @click="send">按钮</button>
    <Test />
    <router-view />
  </div>
</template>

<script>
import Test from './components/Test'
export default {
  name: 'App',
  data () {
    return {
      counters: this.$store.getters.powerCounter,
      name: this.$store.getters.name
    }
  },
  components: {
    Test
  },
  methods: {
    updateName () {
      this.$store.dispatch('updateName', 'heheda')
    },
    update () {
      this.$store.dispatch('aUpdateInfo', 'luoshanji').then(data => {
        console.log(data)
      })
    },
    jia () {
      this.$store.commit('increment')
    },
    jian () {
      this.$store.commit('decrement')
    },
    send () {
      // debugger
      alert('send....' + this.$store.getters.powerCounter)
      this.$http.get('/test?ID=12345')
        .then(function (response) {
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .hehe {
    color: red;
  }
}
</style>
